﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>小米为发烧而生</title>
<script src="/js/jquery.js"></script>

<style>
/*重置属性*/
*{ font-family:"微软雅黑"; font-size:14px; padding:0; margin:0;}
img{ display:block;}
a{ text-decoration:none;}
ul{ list-style:none;}
p,dl,dd{ margin:0; padding:0;}
/*公共属性*/
.clearfix{ clear:both;}
.shadow{box-shadow: 0px 3px 20px 0px rgba(0, 0, 0, 0.2);}
/*头部属性*/
.top_box{ background-color:#333;}
.nav{ width:1226px; margin:0 auto;}
.nav ul{ float:left;}
.nav li{ float:left; border-right:1px #424242 solid;margin-top:14px; margin-bottom:14px; }
.nav a{ color:#9a9898; display:block; padding-left:10px; padding-right:10px; }
.nav a:hover{ color:#fff;}
.login{float:right;}
.login .shop{ width:120px; height:48px; background-color:#424242; float:right;text-align:center;line-height:44px; position:relative; color:#9a9898; }
.bg01{background-image:url(images/buy01.png);background-image:url(images/buy.png); background-repeat:no-repeat;background-position:17px center; text-indent:30px; }
.bg02{background-image:url(images/buy.png);background-image:url(images/buy01.png); background-repeat:no-repeat;background-position:17px center; text-indent:30px;}
.login .current{background-color:#fff; color:#ff6700;}
.login .shop .car{ width:296px; height:98px; background-color:#fff; text-align:center; line-height:98px; color:#333; position:absolute;right:0;top:48px;}
.shadow_lf{ box-shadow:-2px 2px 5px #eee;}
.shadow_rt{ box-shadow:-2px 2px 5px #eee;}
.login a{ color:#9a9898;  }


/*导航属性*/
.mainbav{ width:1226px; margin:0 auto;}
.mainbav .LOGO{ float:left;margin-top:20px;width:240px;}
.LOGO img{ float:left;}
.mainbav ul{ float:left;}
.mainbav ul li{ float:left; margin-le ft:16px; margin-right:16px; line-height:100px;}
.mainbav li a{ font-size:16px; color:#333;}
.mainbav li a:hover{ color:#ff6700;}
.search{ width:294px; height:48px; border:1px #e0e0e0 solid; float:right; margin-top:25px;}
.search .search_box{ width:50px; height:48px; border-left:1px #e0e0e0 solid; float:right;}
.search .search_box img{margin-left:17px; margin-top:16px;}
.search span{ float:right; font-size:12px; color:#757575; margin-top:14px; margin-right:10px; background-color:#eee; padding:3px 5px;}
.search span:hover{ background-color:#ff6700; color:#fff;}

/*广告属性*/
.banner{ width:1226px; height:460px; background-color:#fe8729; margin:0 auto; margin-bottom:16px; position:relative; overflow:hidden;}
.arrow-rtbtn,.arrow-lfbtn{ position:absolute; top:50%; margin-top:-50px;}
.arrow-rtbtn{ right:0;}
.arrow-lfbtn{ left:236px;}
.banner .banner-bigbox{ width:6130px; float:left;}
.banner-bigbox img{ float:left;}
.circle-box{ position:absolute;right:36px; bottom:25px;}
.circle{ width:10px; height:10px; border-radius:50%; border:3px solid #b8b8b8; background-color:#949494; float:left; margin-right:10px; }
.circle-box .current{background-color:#fafafa;}
.menu{ width:236px; height:440px; background-color:rgba(0,0,0,0.4); padding-top:20px; position:absolute;left:0;top:0;}
.menu li{ width:206px; height:43px; line-height:43px; padding-left:30px; color:#fff; position:relative;}
.menu span{ float:right; margin-right:25px;}

.menu li .submenu{ width:530px; height:460px; background-color:#fff; padding-left:33px; padding-top:10px; position:absolute;right:0;top:-25px;margin-right:-563px;}
.menu li .submenua{ width:530px; height:460px; background-color:#fff; padding-left:33px; padding-top:10px; position:absolute;right:0;top:-70px;margin-right:-563px;}
.menu li .submenub{ width:530px; height:480px; background-color:#fff; padding-left:33px; padding-top:10px; position:absolute;right:0;top:-120px;margin-right:-563px;}
.menu li .submenuc{ width:530px; height:480px; background-color:#fff; padding-left:33px; padding-top:10px; position:absolute;right:0;top:-150px;margin-right:-563px;}
.menu li .submenud{ width:530px; height:480px; background-color:#fff; padding-left:33px; padding-top:10px; position:absolute;right:0;top:-195px;margin-right:-563px;}
.menu li .submenue{ width:530px; height:480px; background-color:#fff; padding-left:33px; padding-top:10px; position:absolute;right:0;top:-240px;margin-right:-563px;}
.menu li .submenuf{ width:530px; height:480px; background-color:#fff; padding-left:33px; padding-top:10px; position:absolute;right:0;top:-280px;margin-right:-563px;}
.menu li .submenug{ width:530px; height:480px; background-color:#fff; padding-left:33px; padding-top:10px; position:absolute;right:0;top:-325px;margin-right:-563px;}
.menu li .submenuaa{ width:530px; height:480px; background-color:#fff; padding-left:33px; padding-top:10px; position:absolute;right:0;top:-370px;margin-right:-563px;}
.menu li .submenubb{ width:530px; height:480px; background-color:#fff; padding-left:33px; padding-top:10px; position:absolute;right:0;top:-410px;margin-right:-563px;}


.submenu a{ display:block; line-height:36px; margin-bottom:40px;}
.submenu .xuangou{ width:60px; height:24px; border:1px #ff6700 solid;text-align:center; margin-bottom:0px;}
.submenu .xuangou a{color:#ff6700; line-height:24px; }
.menu .current{ background-color:#fe8729;}
.subnav{ width:1226px; margin:0 auto; margin-bottom:45px;}
.subnav .current{background-color: rgb(33, 150, 243); box-shadow: 0px 3px 20.79px 0.21px rgba(0, 0, 0, 0.35);}
.left_nav{ width:236px; height:170px; background-color:#5f5750; float:left; margin-right:14px;}
.subnav .box1,.subnav .box2,.subnav .box3{ width:316px; height:170px; float:left; margin-right:14px;}

/*明星单品*/
.star{ width:1226px; margin:0 auto; margin-bottom:40px;}
.star .single{ float:left; margin-bottom:19px; width:1226px; font-size:24px; color:#333; overflow:hidden;}
.single .right-btn{ float:right; width:35px; height:25px; border:1px solid #e0e0e0; text-align:center; line-height:25px;}
.single .bg{ background-color:#666;}
.single .left-btn{float:right; width:35px; height:25px; border-left:1px solid #e0e0e0;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0; text-align:center; line-height:25px;}
.star .products-box{  margin-left:auto; margin-right:0;width:1226px; height:340px; overflow:hidden;}
.products-box .products-bigbox{ width:2452px; height:340px; float:left;}
.products-bigbox .products{ float:left; margin-right:14px; width:234px; height:340px; background-color:#fafafa; text-align:center;}
.products-box p{ margin-top:230px; font-family:Arial,"宋体"，sanself; font-size:12px; color:#333;}
.products-box .ziti{ font-size:14px; font-family:Arial,"微软雅黑"，sanself;}

.bg{ width:100%;background-color:#f5f5f5;}

/*智能硬件*/
.hardware-box,.hardware{ margin-left:auto; margin-right:auto; width:1226px; }
.hardware{ float:left; margin-bottom:19px;font-size:24px;color:#333; margin-top:76px;}
.hardware a{ float:right; font-size:18px; margin-right:10px; color:#333;}
.kidwatch{ width:234px; height:614px; float:left; margin-right:14px; background-image:url(images/haraware_kid.png); background-repeat:no-repeat; text-align:center;}
.hardware-right{ width:978px; height:614px;  float:left;}
.hardware-right .hardwareTopbox{ width:978px; height:300px; margin-bottom:14px;}
.hardware-right .hardwareBottomBOX{ width:978px; height:300px; }
.hardwareTopbox .content,.hardwareBottomBOX .content{ width:234px; height:300px; margin-right:14px; background-color:#fff; float:left; text-align:center;}
.content p{ margin-top:200px; font-family:Arial,"宋体"，sanself; font-size:12px; color:#333;}
.content .ziti{ font-size:14px; font-family:Arial,"微软雅黑"，sanself;}

/*搭配和配件和周边*/
.dapei-box,.dapei{margin-left:auto; margin-right:auto; width:1226px;}
.dapei{float:left; margin-bottom:19px;font-size:24px;color:#333; margin-top:40px;}
.dapei a{float:right; font-size:18px; color:#333;}
.dapeiLeftBox{ width:234px; height:614px; float:left; margin-right:14px;}
.dapeiRightBox{ width:978px; height:614px; float:left;}
.dapeiLeftBox .content{width:234px; height:300px; background-color:#fff; margin-bottom:14px; text-align:center;}
.dapeiRightBox .TopBox{ width:978px; height:300px; margin-bottom:14px; float:left;}
.dapeiRightBox .BottomBox{ width:978px; height:300px; float:left;}
.dapeiRightBox .content{width:234px; height:300px;text-align:center; margin-right:14px; float:left; position:relative;}
.dapeiRightBox .content .jg{ position:absolute; bottom:0;}
.dapei ul{ float:right;}
.dapei li{ float:left; margin-right:30px; padding-bottom:2px; font-size:18px;}
.dapei-box .current{ color:#ff6700; border-bottom:2px solid #ff6700; cursor:pointer; }
.dapei .content-top{ width:234px; height:143px;}
.content p{ margin-top:200px; font-family:Arial,"宋体"，sanself; font-size:12px; color:#333;}
.content .ziti{ font-size:14px; font-family:Arial,"微软雅黑"，sanself;}


/*热评产品*/
.reping-box,.reping{margin-left:auto; margin-right:auto; width:1226px;}
.reping{float:left; margin-bottom:19px;font-size:24px;color:#333; margin-top:40px;}
.hotproduct{ float:left; width:296px; height:416px; background-color:#fff; margin-right:14px;}
.hotproduct .judge{ width:240px; margin-top:34px; margin-left:auto; margin-right:auto;}
.hotproduct p{ margin-bottom:35px;}
.hotproduct h1{ font-size:12px; font-family:"宋体",sunself; color:#b0b0b0; display:block; margin-bottom:15px; font-weight:normal;}
.hotproduct a{  border-right:1px solid #b0b0b0; padding-right:10px; margin-right:10px;}

/*分类*/
.classify-box,.classify{margin-left:auto; margin-right:auto; width:1226px;}
.classify{float:left; margin-bottom:19px;font-size:24px;color:#333; margin-top:40px;}
.classify-box .content{ width:296px; height:374px; background-color:#fff; float:left; margin-right:14px; padding-top:50px; text-align:center;}

/*视频*/
.video-box,.video{margin-left:auto; margin-right:auto; width:1226px; }
.video-box{ padding-bottom:60px;}
.video{float:left; margin-bottom:19px;font-size:24px;color:#333; margin-top:40px;}
.video-box .content{ width:296px; height:290px; background-color:#fff; float:left; margin-right:14px; text-align:center; position:relative;}
.content h1{ font-size:14px; font-weight:normal; color:#333; margin-top:30px; margin-bottom:12px;}
.content h2{ font-size:12px; font-weight:normal; font-family:Arial,"宋体"; color:#b0b0b0;}
.content .play{ position:absolute; left:20px; top:146px;}
/*页脚*/
.footer-box{ width:100%; background-color:#fff;}
.footer{ width:1226px; margin-left:auto; margin-right:auto;}
.footer ul{ margin-top:27px; margin-bottom:27px;}
.footer li{ float:left; width:244px; height:26px; border-right:1px solid #e0e0e0; text-align:center;line-height:26px;}
.footer li a{  color:#616161;}
.footer li a:hover{ color:#ff6700;}
.line{ width:1226px; height:1px; background-color:#e0e0e0; margin-bottom:40px;}
.footer dl{ margin-right:104px; float:left; margin-bottom:25px;}
.footer dd{  margin-bottom:15px; }
.footer dd a{font-size:12px; font-family:"宋体";color:#757575;}
.footer dd a:hover{ color:#ff6700;}
.online{ width:246px; text-align:center; float:left;}
.service{margin-left:auto; margin-right:auto; width:120px; height:30px; border:1px solid #ff6700; line-height:30px; text-align:center; color:#ff6700; font-weight:Arial,"微软雅黑"; font-size:12px;}

/*合作*/
.team-box{ width:100%; background-color:#f5f5f5; padding-top:33px;}
.team{ width:1226px; margin-left:auto; margin-right:auto;}
.team .logo{ float:left; margin-right:3px;}
.team a{ border-right:1px solid #b0b0b0; line-height:12px; padding-left:5px; padding-right:5px; font-family:Arial,"宋体"; font-size:12px; color:#757575;}
.team p{font-family:Arial,"宋体"; font-size:12px; margin-bottom:2px; float:left; color:#b0b0b0;}
.team p a:hover{ color:#ff6700;}
.team .safe{ float:left; width:285px;}
.safe span{ float:left; width:60px; margin-right:4px;}
.word{ width:1226px; margin-left:auto; margin-right:auto; text-align:center;font-family:"华文行楷",sunself; font-size:20px; color:#bababa; font-weight:normal; padding-bottom:30px;}
</style>
</head>
<body>
<!--头部属性-->
<div class="top_box">
    <div class="nav">
        <ul>
            <li style="margin-left:0; padding:0;"><a href="{$Think.const.THINK_URL}">小米网</a></li>
            <li><a href="http://www.miui.com/">MIUI</a></li>
            <li><a href="http://www.miliao.com/">米聊</a></li>
            <li><a href="http://game.xiaomi.com/hy/index.html">游戏</a></li>
            <li><a href="http://www.duokan.com">多看阅读</a></li>
            <li><a href="https://i.mi.com/">云服务</a></li>
            <li><a href="http://www.mi.com/c/appdownload/">小米网移动版</a></li>
            <li><a href="http://static.mi.com/feedback/">问题反馈</a></li>
        </ul>
        <div class="login">

        <div class="shop"><div class="bg01"><a href="{$Think.const.THINK_URL}/index/index/goodcar" style="color:#f90">购物车({$gnumber})</a></div>
                <div class="car">购物车中还没有商品，赶紧选购吧！</div>
            </div>
            {if null == $Think.session.username}
            <ul>
                <li><a href="{$Think.const.THINK_URL}/index/user/login">登录</a></li>
                <li  style="border:0;"><a href="{$Think.const.THINK_URL}/index/user/register">注册</a></li>
            </ul>
            {else}
            <ul>
                <li><a href="{$Think.const.THINK_URL}/index/order/orders">我的订单</a></li>
                <li><a href="{$Think.const.THINK_URL}/index/order/addres">个人中心</a></li>
                <li><a href="{$Think.const.THINK_URL}/index/user/session">退出登陆</a></li>
            </ul>
            {/if}

        </div>
    </div>
    <div class="clearfix"></div>
</div>
<!--主导航-->
<div class="mainbav">
    <div class="LOGO"><img src="images/LOGO.png"><img src="images/donghua.gif"></div>
    <ul>
        <li><a href="{$Think.const.THINK_URL}/index/Index/detail/">小米盒子</a></li>
        <li><a href="{$Think.const.THINK_URL}/index/Index/detail">红米</a></li>
        <li><a href="{$Think.const.THINK_URL}/index/Index/detail">平板</a></li>
        <li><a href="{$Think.const.THINK_URL}/index/Index/detail">电视</a></li>
        <li><a href="{$Think.const.THINK_URL}/index/Index/detail">盒子</a></li>
        <li><a href="{$Think.const.THINK_URL}/index/Index/detail">路由器</a></li>
        <li><a href="{$Think.const.THINK_URL}/index/Index/detail">智能硬件</a></li>
        <li><a href="{$Think.const.THINK_URL}/index/Index/detail">全部商品</a></li>
    </ul>
    <div class="search">
        <div class="search_box"><img src="images/search.png"></div>
        <span>平衡车</span>
        <span>小米手机4c</span>
    </div>
    <div class="clearfix"></div>
</div>
<!--banner-->
<div class="banner">
    <div class="arrow-rtbtn"><img src="images/arrow_rightbtn01.png"></div>
    <div class="arrow-lfbtn"><img src="images/arrow_leftbtn01.png"></div>
    <div class="banner-bigbox">

    {foreach $dt as $dbk}
         <a href="{$Think.const.THINK_URL}/index/index/goodsxq/id/{$dbk.gid}"><img src="images/{$dbk.public}"></a>
	{/foreach}
    </div>
    <div class="circle-box">
        <div class="circle current"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle" style=" margin-right:0;"></div>
    </div>
    <div class="menu">
            <ul>
                <li class="spd">手机 平板 电话卡<span>&gt;</span>
                    <div class="submenu">
                    {foreach $good as $val}
                    <div style="float: left;">
                        <div style="float:left; margin-right:13px;"><img src="image/{$val.public}" width="30" height="30">
                        </div>
                        <div  style="float:left; margin-right:30px;color:red;">
                        <a href="{$Think.const.THINK_URL}/index/index/goodsxq/id/{$val.gid}" style="color:#f90;">{$val.goodsname}</a>
                        </div>
                        <div  style="float:left; padding-top:5px; margin-right:34px;">
                        <div class="xuangou"><a href="#">选购</a></div>

                        </div>
                    </div>
                        {/foreach}
                    </div>
                </li>

                <li class="dh">电视 盒子<span>&gt;</span>
                <div class="submenua">
                    {foreach $gooda as $vala}
                    <div style="float: left;">
                        <div style="float:left; margin:20px 20px;"><img src=image/{$vala.public}>
                        </div>
                        <div  style="float:left; margin:15px 30px;color:red;">
                   
                        <a href="{$Think.const.THINK_URL}/index/index/goodsxq/id/{$vala.gid}" style="color:#f90;">{$vala.goodsname}</a>
                        </div>
                    </div>
                    {/foreach}
                </div>
                </li>
                <li class="lz">路由器 智能硬件<span>&gt;</span>
                <div class="submenub">
                    {foreach $goodb as $valb}
                    <div style="float: left;">
                        <div style="float:left; margin:20px 20px;"><img src=image/{$valb.public}>
                        </div>
                        <div  style="float:left; margin:15px 30px;color:red;">
                  
                        <a href="{$Think.const.THINK_URL}/index/index/goodsxq/id/{$valb.gid}" style="color:#f90;">{$valb.goodsname}</a>
                        </div>
                    </div>
                    {/foreach}
                </div>
                </li>
                <li class="yc">移动电源 插线板<span>&gt;</span>
                <div class="submenuc">
                    {foreach $goodc as $valc}
                    <div style="float: left;">
                        <div style="float:left; margin:20px 20px;"><img src=image/{$valc.public}>
                        </div>
                        <div  style="float:left; margin:15px 30px;color:red;">
                        
                        <a href="{$Think.const.THINK_URL}/index/index/goodsxq/id/{$valc.gid}" style="color:#f90;">{$valc.goodsname}</a>
                        </div>
                    </div>
                    {/foreach}
                </div>
                </li>
                <li class="ey">耳机 音箱<span>&gt;</span>
                <div class="submenud">
                    {foreach $goodd as $vald}
                    <div style="float: left;">
                        <div style="float:left; margin:20px 20px;"><img src=image/{$vald.public}>
                        </div>
                        <div  style="float:left; margin:15px 30px;color:red;">
                       <a href="{$Think.const.THINK_URL}/index/index/goodsxq/id/{$vald.gid}" style="color:#f90;">{$vald.goodsname}</a>
                        </div>
                    </div>
                    {/foreach}
                </div>
                </li>
                <li class="dc">电池 存储卡<span>&gt;</span>
                <div class="submenue">
                    {foreach $goode as $vale}
                    <div style="float: left;">
                        <div style="float:left; margin:20px 20px;"><img src=image/{$vale.public}>
                        </div>
                        <div  style="float:left; margin:15px 30px;color:red;">
                        <a href="{$Think.const.THINK_URL}/index/index/goodsxq/id/{$vale.gid}" style="color:#f90;">{$vale.goodsname}</a>
                        </div>
                    </div>
                    {/foreach}
                </div>
                </li>
                <li class="bh">保护套 后盖<span>&gt;</span>
                <div class="submenuf">
                    {foreach $goodf as $valf}
                    <div style="float: left;">
                        <div style="float:left; margin:20px 20px;"><img src=image/{$valf.public}>
                        </div>
                        <div  style="float:left; margin:15px 30px;color:red;">
                        <a href="{$Think.const.THINK_URL}/index/index/goodsxq/id/{$valf.gid}" style="color:#f90;">{$valf.goodsname}</a>
                        </div>
                    </div>
                    {/foreach}
                </div>
                </li>
                <li class="tq">贴膜 其他配件<span>&gt;</span>
                <div class="submenug">
                    {foreach $goodg as $valg}
                    <div style="float: left;">
                        <div style="float:left; margin:20px 20px;"><img src=image/{$valg.public}>
                        </div>
                        <div  style="float:left; margin:15px 30px;color:red;">
                        <a href="{$Think.const.THINK_URL}/index/index/goodsxq/id/{$valg.gid}" style="color:#f90;">{$valg.goodsname}</a>
                        </div>
                    </div>
                    {/foreach}
                </div>
                </li>
                <li class="mf">米兔 服装<span>&gt;</span>
                <div class="submenuaa">
                    {foreach $goodaa as $valaa}
                    <div style="float: left;">
                        <div style="float:left; margin:20px 20px;"><img src=image/{$valaa.public}>
                        </div>
                        <div  style="float:left; margin:15px 30px;color:red;">
                       <a href="{$Think.const.THINK_URL}/index/index/goodsxq/id/{$valaa.gid}" style="color:#f90;">{$valaa.goodsname}</a>
                        </div>
                    </div>
                    {/foreach}
                </div>
                </li>
                <li class="xq">箱包 其他周边<span>&gt;</span>
                <div class="submenubb">
                    {foreach $goodbb as $valbb}
                    <div style="float: left;">
                        <div style="float:left; margin:20px 20px;"><img src=image/{$valbb.public}>
                        </div>
                        <div  style="float:left; margin:15px 30px;color:red;">
                        <a href="{$Think.const.THINK_URL}/index/index/goodsxq/id/{$valbb.gid}" style="color:#f90;">{$valbb.goodsname}</a>
                        </div>
                    </div>
                    {/foreach}
                </div>
                </li>
            </ul>
    </div>
</div>




<div class="subnav">
	<div style="float:left;"><a href="http://www.mi.com/service/account/register/"><img src="images/left.png"></a></div>
	{foreach $dtt as $valuee}
	<div style="float:left;border:1 solid black;"><a href="{$Think.const.THINK_URL}/index/index/goodsxq/id/{$valuee.gid}"><img src="images/{$valuee.public}"></a></div>
	{/foreach}
</div>

<!--明星单品-->
<div class="star">
    <div class="single">
            小米明星单品
        <div class="right-btn">&gt;</div>
        <div class="left-btn">&lt;</div>
    </div>
    <div class="products-box">
        <div class="products-bigbox">
            {foreach $data as $da}
            <div class="products" style="border-top:1px solid #ffac13; background:#fafafa url(images/{$da.public}) center 66px no-repeat;">
                <p class="ziti">
                <a href="{$Think.const.THINK_URL}/index/index/goodsxq/id/{$da.gid}">{$da.goodsname}<a></p>
                <p class="ziti" style=" margin-top:10px; color:#b0b0b6;"><a href="{$Think.const.THINK_URL}/index/index/goodsxq/id/{$da.gid}" style=" margin-top:10px; color:#b0b0b6;">{$da.summary}</a></p>
                <p style="color:#ff6709; margin-top:15px;">{$da.price}元起</p>
            </div>
            {/foreach}


        </div>
    </div>
    <div class="clearfix"></div>
</div>


<div class="bg">

    <!--热评产品-->
    <div class="reping-box">
        <div class="reping">
            热评产品
        </div>
        <div class="hotproduct">
        <a href="http://www.mi.com/mimax/">
            <img src="images/hotproduct_icon01.png">
            <div class="judge">
                <p>超值正品，再也不会担心头那里时间久了坏掉，感觉升级版萌萌哒，既好用又好看</p>
                <h1>来自于 香草忘忧 的评价</h1>
                <a>米兔手机U盘</a><span style="color:#ff6700;">49.9元</span>
            </div>
        </a>
        </div>
        <div class="hotproduct">
        <a href="http://www.mi.com/mitu/">
            <img src="images/hotproduct_icon02.png">
            <div class="judge">
                <p style="margin-bottom:52px;">绝对5星，音质挺好，包装也不错，物流也快</p>
                <h1>来自于 星星活火 的评价</h1>
                <a>小米活塞耳机 标准版</a><span style="color:#ff6700;">49.9元</span>
            </div>
        </a>
        </div>
         <div class="hotproduct">
          <a href="http://www.mi.com/mitu/">
            <img src="images/hotproduct_icon03.png">
            <div class="judge">
                <p style="margin-bottom:52px;">做工没的说，摸起来非常细腻，而且比传统的插板稳固</p>
                <h1>来自于 林新城 的评价</h1>
                <a>小米插线板</a><span style="color:#ff6700;">49元</span>
            </div>
        </a>
        </div>
        <div class="hotproduct" style="margin-right:0;">
         <a href="http://www.mi.com/mitu/">
        <img src="images/hotproduct_icon04.png">
            <div class="judge">
                <p style="margin-bottom:52px;">一如既往的发烧体验，炫酷外形，人性的设计，动听的音质！高低音表现平衡</p>
                <h1>来自于 人生如戏 的评价</h1>
                <a>小米头戴式耳机 标准版</a><span style="color:#ff6700;">499元</span>
            </div>
        </a>
        </div>
    </div>

    <!--视频-->
    <div class="video-box">

        <div class="video">
                视频
             <img style="float:right;" src="images/hardware_morebtn.png">
            <a href="http://www.mi.com/video/" style="float:right; font-size:18px; margin-right:10px; color:#333;">查看更多</a>
        </div>
        <div class="content">
        <a href="http://www.mi.com/video/">
            <img class="play" src="images/video_play.png">
            <img src="images/video_icon01.jpg">
             <h1>笑喷了，沈腾爆笑出演，6集联播</h1>
             <h2>小米Max沈腾爆笑预告全集</h2>
         </a>
        </div>
        <div class="content">
        <a href="http://www.mi.com/video/">
            <img class="play" src="images/video_play.png">
            <img src="images/video_icon02.jpg">
            <h1>小米2016春季新品发布会</h1>
             <h2>小米5 十余项黑科技亮相</h2>
         </a>
        </div>
        <div class="content">
        <a href="http://www.mi.com/video/">
            <img class="play" src="images/video_play.png">
            <img class="icon" src="images/video_icon03.jpg">
            <h1>15秒了解小米5 有多快</h1>
             <h2>华少用超快语速告诉你小米5 到底有多快</h2>
        </a>
        </div>
        <div class="content" style="margin-right:0;">
        <a href="http://www.mi.com/video/">
            <img class="play" src="images/video_play.png">
            <img src="images/video_icon04.jpg">
                <h1>《去探索》 小米年度品牌视频</h1>
                <h2>与小米一起探索黑科技</h2>
        </a>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>

<!--页脚-->
<div class="footer-box">
    <div class="footer">
        <ul>
            <li style="background:url(images/footer_icon01.png) no-repeat 40px center;"><a href="http://www.mi.com/static/fast/">1小时快修服务</a></li>
            <li style="background:url(images/footer_icon02.png) no-repeat 40px center;"><a href="http://www.mi.com/service/exchange#back">7天无理由退货</a></li>
            <li style="background:url(images/footer_icon03.png) no-repeat 40px center;"><a href="http://www.mi.com/service/exchange#free">15天免费换修</a></li>
            <li style="background:url(images/footer_icon04.png) no-repeat 40px center;"><a href="http://www.mi.com/service/exchange#mail">满150元包邮</a></li>
            <li style="background:url(images/footer_icon05.png) no-repeat 40px center;"><a href="http://www.mi.com/static/maintainlocation/">520余家售后网点</a></li>
            <div class="clearfix"></div>
        </ul>
        <div class="line"></div>

        <dl>
            <dd style="font-size:14px; font-family:'微软雅黑'; color:#424242; margin-bottom:28px;">帮助中心</dd>
            <dd><a href="http://www.mi.com/service/account/register/">购物指南</a></dd>
            <dd><a href="http://www.mi.com/service/account/register/">支付方式</a></dd>
            <dd><a href="http://www.mi.com/service/account/register/">配送方式</a></dd>
        </dl>
        <dl>
            <dd style="font-size:14px; font-family:'微软雅黑'; color:#424242; margin-bottom:28px;">服务支持</dd>
            <dd><a href="http://www.mi.com/service/exchange">售后政策</a></dd>
            <dd><a href="http://fuwu.mi.com/">自助服务</a></dd>
            <dd><a href="http://xiazai.mi.com/">相关下载</a></dd>
        </dl>
        <dl>
            <dd style="font-size:14px; font-family:'微软雅黑'; color:#424242; margin-bottom:30px;">线下门店</dd>
            <dd><a href="http://www.mi.com/c/xiaomizhijia/">小米之家</a></dd>
            <dd><a href="http://www.mi.com/static/maintainlocation/">服务网点</a></dd>
            <dd><a href="http://www.mi.com/static/familyLocation/">线下专区</a></dd>
        </dl>
        <dl>
            <dd style="font-size:14px; font-family:'微软雅黑'; color:#424242; margin-bottom:28px;">关于小米</dd>
            <dd><a href="http://www.mi.com/about">了解小米</a></dd>
            <dd><a href="http://hr.xiaomi.com/">加入小米</a></dd>
            <dd><a href="http://www.mi.com/about/contact">联系我们</a></dd>
        </dl>
        <dl>
            <dd style="font-size:14px; font-family:'微软雅黑'; color:#424242; margin-bottom:28px;">关注我们</dd>
            <dd><a href="http://weibo.com/xiaomishangcheng">新浪微博</a></dd>
            <dd><a href="http://xiaoqu.qq.com/mobile/share/index.html?url=http%3A%2F%2Fxiaoqu.qq.com%2Fmobile%2Fbarindex.html%3Fwebview%3D1%26type%3D%26source%3Dindex%26_lv%3D25741%26sid%3D%26_wv%3D5123%26_bid%3D128%26%23bid%3D10525%26from%3Dwechat">小米部落</a></dd>
            <dd><a href="http://xiaoqu.qq.com/mobile/share/index.html?url=http%3A%2F%2Fxiaoqu.qq.com%2Fmobile%2Fbarindex.html%3Fwebview%3D1%26type%3D%26source%3Dindex%26_lv%3D25741%26sid%3D%26_wv%3D5123%26_bid%3D128%26%23bid%3D10525%26from%3Dwechat">官方微信</a></dd>
        </dl>
        <dl style="margin-right:123px;">
            <dd style="font-size:14px; font-family:'微软雅黑'; color:#424242; margin-bottom:28px;">特色服务</dd>
            <dd><a href="https://account.xiaomi.com/pass/serviceLogin?callback=http%3A%2F%2Forder.mi.com%2Flogin%2Fcallback%3Ffollowup%3Dhttp%253A%252F%252Forder.mi.com%252Fqueue%252Ff2code%26sign%3DODI0YjlhNzZjNGEzOWM3YTk5NTg2OTQ4YjQxODkwMmQ3MTk4Yjc3YQ%2C%2C&sid=mi_eshop&_bannerBiz=mistore&_qrsize=180">F码通道</a></dd>
            <dd><a href="http://www.mi.com/giftcode/">小米移动</a></dd>
            <dd><a href="http://order.mi.com/misc/checkitem">防伪查询</a></dd>
        </dl>
        <div style="width:1px; height:111px; float:left; background-color:#e0e0e0; margin-top:10px; "></div>
        <div class="online">
            <p style="font-size:20px; color:#ff6700; margin-bottom:10px;">400-100-5678</p>
            <p style="font-size:12px; font-family:Arial,'宋体'; color:#616161; margin-bottom:7px;">周一至周日 8:00-18:00</p>
            <p style="font-size:12px; font-family:Arial,'宋体'; color:#616161; margin-bottom:18px;">（仅收市话费）</p>
            <div class="service">24小时在线客服</div>
        </div>
    </div>
    <div class="clearfix"></div>
</div>



<!--合作-->
<div class="team-box">
    <div class="team">
        <div class="logo"><img src="images/team_logo.png"></div>
        <div style="width:880px; float:left; margin-bottom:30px;">
            <p><a href="{$Think.const.THINK_URL}">小米网</a><a href="http://www.miui.com/">MIUI</a><a href="http://www.miliao.com/">米聊</a><a href="http://www.duokan.com">多看书城</a><a href="http://www.mi.com/c/appdownload/">小米路由器</a><a href="https://i.mi.com/">视频电话</a>
            <a href="https://i.mi.com/">小米后院</a><a href="https://i.mi.com/">小米天猫店</a><a href="https://i.mi.com/">小米淘宝直营店</a><a href="https://i.mi.com/">小米网盟</a><a href="https://i.mi.com/">问题反馈</a>
            <a href="https://i.mi.com/">Select Region</a>
        </p>
        <p style="margin-left:5px;">©mi.com京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号 违法和不良信息举报
            电话：185-0130-1238</p>
        <p style="margin-left:5px;">本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
        <div class="clearfix"></div>
        </div>
        <div class="safe">
            <img style="float:left; margin-right:5px;" src="images/safe_icon01.png">
            <span>诚信网站师范企业</span>
            <img style="float:left; margin-right:5px;" src="images/safe_icon02.png">
            <span>可信网站信用评价</span>
            <img style="float:left; margin-right:5px;" src="images/safe_icon03.png">
            <span style="margin-right:0;">网上交易保障中心</span>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="word">探索黑科技，小米为发烧而生</div>
</div>
<div style="height:20px; background-color:#fafafa;"></div>
<script>
/*页眉*/
$(".top_box .shop .car").hide()
$(".top_box .shop").mouseenter(
    function(){
        $(".login .shop").addClass("current")
        $(".login .shop .car").stop(true.true).slideToggle()
        $(".car").addClass("shadow_lf").addClass("shadow_rt")
        $(".bg01").addClass("bg02")
        }
).mouseleave(
    function(){
        $(".top_box .shop .car").stop(true.true).slideToggle()
        $(".top_box .shop ").removeClass("current")
        $(".bg01").removeClass("bg02")
        }
)
/*banner*/
    /*菜单*/
    $(".submenu").hide()
    $(".spd").mouseenter(
        function(){
            $(this).addClass("current").siblings().removeClass("current")
            $(".submenu").show()
            }
    ).mouseleave(
        function(){
            $(this).removeClass("current")
            $(".submenu").hide()
            }
    )
    $(".submenua").hide()
    $(".dh").mouseenter(
        function(){
            $(this).addClass("current").siblings().removeClass("current")
            $(".submenua").show()
            }
    ).mouseleave(
        function(){
            $(this).removeClass("current")
            $(".submenua").hide()
            }
    )
    $(".submenub").hide()
    $(".lz").mouseenter(
        function(){
            $(this).addClass("current").siblings().removeClass("current")
            $(".submenub").show()
            }
    ).mouseleave(
        function(){
            $(this).removeClass("current")
            $(".submenub").hide()
            }
    )
    $(".submenuc").hide()
    $(".yc").mouseenter(
        function(){
            $(this).addClass("current").siblings().removeClass("current")
            $(".submenuc").show()
            }
    ).mouseleave(
        function(){
            $(this).removeClass("current")
            $(".submenuc").hide()
            }
    )
    $(".submenud").hide()
    $(".ey").mouseenter(
        function(){
            $(this).addClass("current").siblings().removeClass("current")
            $(".submenud").show()
            }
    ).mouseleave(
        function(){
            $(this).removeClass("current")
            $(".submenud").hide()
            }
    )
    $(".submenue").hide()
    $(".dc").mouseenter(
        function(){
            $(this).addClass("current").siblings().removeClass("current")
            $(".submenue").show()
            }
    ).mouseleave(
        function(){
            $(this).removeClass("current")
            $(".submenue").hide()
            }
    )
    $(".submenuf").hide()
    $(".bh").mouseenter(
        function(){
            $(this).addClass("current").siblings().removeClass("current")
            $(".submenuf").show()
            }
    ).mouseleave(
        function(){
            $(this).removeClass("current")
            $(".submenuf").hide()
            }
    )
    $(".submenug").hide()
    $(".tq").mouseenter(
        function(){
            $(this).addClass("current").siblings().removeClass("current")
            $(".submenug").show()
            }
    ).mouseleave(
        function(){
            $(this).removeClass("current")
            $(".submenug").hide()
            }
    )
    $(".submenuaa").hide()
    $(".mf").mouseenter(
        function(){
            $(this).addClass("current").siblings().removeClass("current")
            $(".submenuaa").show()
            }
    ).mouseleave(
        function(){
            $(this).removeClass("current")
            $(".submenuaa").hide()
            }
    )
    $(".submenubb").hide()
    $(".xq").mouseenter(
        function(){
            $(this).addClass("current").siblings().removeClass("current")
            $(".submenubb").show()
            }
    ).mouseleave(
        function(){
            $(this).removeClass("current")
            $(".submenubb").hide()
            }
    )
    /*banner*/
    $(".circle").mouseenter(
        function(){
                $(this).addClass("current").siblings().removeClass("current")//鼠标经过当前的圆环，其添加背景颜色类变为白色，他的同胞颜色不变
            }
    )
    $(".circle").click(
        function(){
            x=$(".circle").index($(this))//获取当前圆圈的位置
            $(".banner-bigbox").animate({marginLeft:x*-1226},1000)//鼠标点击当前第x个的圆环，banner-bigbox停在距离中心点（0，0）marginLeft的位置
            /*$(".banner-bigbox img").eq(x).show().siblings().hide()*///鼠标点击当前第x个的圆环，banner-bigbox的第x张图片显示，所有同胞隐藏
            }
    )
    /*subnav*/
    $(".subnav .box1,.subnav .box2,.subnav .box3").mouseenter(
        function(){
            $(this).addClass("current").siblings().removeClass("current")
            }
    ).mouseleave(
        function(){
            $(this).removeClass("current")
            }
    )
    /*arrow-btn*/
    $(".arrow-rtbtn").mouseenter(
        function(){
            $(".arrow-rtbtn img").attr("src","images/arrow_rightbtn.png")//鼠标经过banner右箭头时，换图片
            }
    ).mouseleave(
        function(){
            $(".arrow-rtbtn img").attr("src","images/arrow_rightbtn01.png")//鼠标经过banner右箭头时，变为原来的图片
            }
    )
    $(".arrow-lfbtn").mouseenter(
        function(){
            $(".arrow-lfbtn img").attr("src","images/arrow_leftbtn.png")//鼠标经过banner左箭头时，换图片
            }
    ).mouseleave(
        function(){
            $(".arrow-lfbtn img").attr("src","images/arrow_leftbtn01.png")//鼠标经过banner左箭头时，变为原来的图片
            }
    )
    var t=0//赋值一个变量
    $(".arrow-rtbtn").click(
        function(){
            if(t<4){t=t+1}//当t小于4时，让t加1
            else{t=0}//否则把t值为0
            $(".banner-bigbox").animate({marginLeft:t*-1226},1000)//点击banner右箭头时，点击一次banner-bigbox盒子向左移动1226px
            $(".circle").eq(t).addClass("current").siblings().removeClass("current")//盒子移动的同时，对应的圆圈增加current类

            }
    )
    $(".arrow-lfbtn").click(
        function(){
            if(t>0){t=t-1}//当t大于0时，让t减1
            else{t=4}//否则把t值为4
            $(".banner-bigbox").animate({marginLeft:t*-1226},1000)//点击banner左箭头时，点击一次banner-bigbox盒子向左移动1226px
            $(".circle").eq(t).addClass("current").siblings().removeClass("current")//盒子移动的同时，对应的圆圈增加current类
            }
    )
/*明星产品*/
$(".right-btn,.left-btn").mouseenter(
    function(){
        $(this).addClass("bg")//鼠标点击右箭头，products-bigbox向左移动1226px
        }
).mouseleave(
    function(){
        $(this).removeClass("bg")
        }
)
$(".right-btn").click(
    function(){
        $(".products-bigbox").animate({marginLeft:-1226},2000)//鼠标点击右箭头，products-bigbox向左移动1226px
        }
)
$(".left-btn").click(
    function(){
        $(".products-bigbox").animate({marginLeft:0},2000)//鼠标点击左箭头，products-bigbox回到原位置
        }
)
/*搭配--周边--配件*/
$(".dapei li").mouseenter(
    function(){
        $(this).addClass("current").siblings().removeClass("current")
        }
)

/***********************视频**************************/
$(".hotproduct").mouseenter(
    function(){
        $(this).stop(false).animate({marginTop:-2})
        $(this).addClass("shadow").siblings().removeClass("shadow")
        }
).mouseleave(
    function(){
        $(this).stop(false).animate({marginTop:0})
        $(this).removeClass("shadow")
        }
)

/***********************视频**************************/
$(".content").mouseenter(
    function(){
        $(this).stop(false).animate({marginTop:-2})
        $(this).addClass("shadow").siblings().removeClass("shadow")
        }
).mouseleave(
    function(){
        $(this).stop(false).animate({marginTop:0})
        $(this).removeClass("shadow")
        }
)
/***********************视频**************************/
$(".video-box .content").mouseenter(
    function(){
        $(this).find(".play").attr("src","images/video_play01.png")
        }
).mouseleave(
    function(){
        $(this).find(".play").attr("src","images/video_play.png")
        }
)
</script>
</body>
</html>
